

document.addEventListener("DOMContentLoaded",function(){

    var button = document.getElementById("notesOption");
    button.addEventListener("click", function notesOption() {
      
    })

    var markdownEdit = document.getElementById("markdownButton");
    markdownEdit.addEventListener("click", function markdownEdit() {

        var mainContainer = document.getElementById("mainContainer");
        var markdownHtml = document.getElementById("markdownHtml");

        mainContainer.style.display = "none"
        markdownHtml.style.display = "block";
      
    })

    renderNotes("test");

    var userInput = document.getElementById("user-input");

    userInput.addEventListener("keydown", function(event) {

        // 检查按下的键是否为 Enter 键并且同时按下了 Shift 键 (key 为 "Enter" 并且 shiftKey 为 true)
        if (event.key === "Enter" && event.shiftKey) {
            // 允许默认的 Shift + Enter 换行行为
            return;
        }

        // 检查按下的键是否为 Enter 键 (key 为 "Enter")
        if (event.key === "Enter") {
            // 阻止默认的 Enter 换行行为
            event.preventDefault();
            // 触发按钮的点击事件
            submitButton.click();
        }
        
    });

    var submitButton = document.getElementById("submit-btn");
    submitButton.addEventListener("click", function (){

        
        userInput.value="";
        

        // 发送消息到content.js
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, { action: "feedback_submit"});
            });

    })
    

})

function renderNotes(notesJsonData){
    var mdString = notesJsonData;
    // var mdStringtest = "# 这是一个标题\n\n这是一段普通的文本，**这里是加粗的文本**。\n\n- 这是一个无序列表\n- 这是第二个列表项\n\n[这是一个链接]\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n\n\n- 这是一个无序列表\n";
    // 将md字符串转换为html字符串
    const mdStringtest = `# 大数据背景下数据管理面临的挑战讲义\n\n## I. 引言\n大数据时代的到来为企业带来了巨大的机遇，同时也伴随着一系列复杂的数据管理挑战。有效的数据管理成为企业成功应对这一挑战的关键。本讲义将介绍在大数据背景下，数据管理所面临的主要挑战以及相应的应对策略。\n\n## II. 大数据的特点\n1. **数据量巨大：** 传统数据库无法轻松处理的海量数据，需要新的存储和处理方式。\n2. **多样化数据类型：** 大数据不仅包括结构化数据，还包括半结构化和非结构化数据，如文本、图像、视频等。\n3. **实时性要求：** 部分应用需要实时分析和处理数据，对数据处理速度提出更高要求。\n\n## III. 数据管理挑战\n\n### 1. 存储与处理\n   - a. **分布式存储：** 数据存储不再是单一数据库的问题，而是涉及到分布式存储系统，如Hadoop Distributed File System (HDFS).\n   - b. **实时处理：** 实时数据处理引入了新的技术，如流处理，以满足对数据实时性的需求。\n\n### 2. 数据质量与一致性\n   - a. **数据质量：** 大数据环境中，数据源复杂多样，数据质量难以保证。需要实施数据清洗和验证机制.\n   - b. **一致性：** 分布式系统中的数据一致性问题，例如在分布式数据库中的事务管理。\n\n### 3. 数据安全与隐私\n   - a. **数据泄漏风险：** 大数据涉及的数据量庞大，一旦泄露可能带来重大损失。数据加密、访问控制等技术是关键.\n   - b. **合规性要求：** 数据管理需要符合各种法规和标准，如GDPR、HIPAA等。\n\n### 4. 数据集成与流程\n   - a. **多源数据集成：** 不同部门和系统中的数据集成变得更加复杂，需要采用先进的ETL（Extract, Transform, Load）工具和技术.\n   - b. **流程管理：** 数据流程的设计和管理，以确保数据在整个生命周期内得到有效管理和监控。\n\n### 5. 数据分析与挖掘\n   - a. **分析工具多样性：** 大数据环境中有多种分析工具，需要选择适用。\n`;

    var htmlString = marked.parse(mdStringtest);
    // 获取html容器
    var mdContainer = document.getElementById("notesContent");
    // 将html字符串插入到html容器中
    mdContainer.innerHTML = htmlString;

}

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

    if (request.action === "backText") {
        // 执行后台任务
        var mainContainer = document.getElementById("mainContainer");
        var markdownHtml = document.getElementById("markdownHtml");

        mainContainer.style.display = "block"
        markdownHtml.style.display = "none";
    }
    
});


